<script setup lang="ts">
import { ref } from "vue";
import { onBeforeRouteUpdate } from "vue-router"

const keyword = ref("")
// https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96
// 或者使用监视解决，这里使用了导航守卫
onBeforeRouteUpdate(to => {
    const { params } = to
    keyword.value = params.keyword as string
})
</script>

<template>
    <h1>Search</h1>
    <div>{{ keyword }}</div>
</template>